<template>
  <div>
    <div v-if="boxCss" class="boxBlock">
      <div class="Version">
        <p>2022-6-18 14:00 V1.2.3</p>
        <h6>更新内容</h6>
        <ul>
          <li v-for="(v, i) in update" :key="i">
            {{ v }}
          </li>
        </ul>
        <div class="know" @click="ok">我已知晓</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      update: [
        '1.智能综采图标替换，图标颜色更改',
        '2.更改场景中告警图表样式',
        '2.更改场景中告警图表样式'
      ],
      boxCss: false
    };
  },
  methods: {
    block() {
      this.boxCss = true;
    },
    ok() {
      this.boxCss = false;
    }
  }
};
</script>
<style lang="scss"  scoped>
.boxBlock {
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #101010;
  position: relative;
  position: absolute;
  z-index: 999 !important;
  opacity: 0.8;
  .Version {
    width: 31.25rem;
    height: 28.6875rem;
    background: url(~@/assets/img/login/login-form.png);
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 4.375rem 3.75rem;
    p,
    h6 {
      font-size: 0.875rem;
      color: #fff;
    }
    p{font-weight: 600;}
    h6 {
      margin-bottom: 0.5rem;
    }
    li {
      color: rgba(173, 173, 173, 100);
      font-size: 0.75rem;
      font-family: Helvetica-bold;
      line-height: 2rem;
    }
    .know {
      text-align: center;
      line-height: 2.125rem;
      width: 10.625rem;
      border: 0.0625rem solid #00fdff;
      color: #00fdff;
      cursor: pointer;
      position: absolute;
      bottom: 3.75rem;
      left: 11rem;
    }
  }
}
</style>

